<script>

  import sheep from '@/sheep';

  export default {
    name: 'addPersonnelPopup',
    data() {
      return {
        // 是否显示绑定按钮
        isShow: false,
        // 是否绑定成功
        isBindSuccess: false,
      };
    },
    props: {
      addPersonnelInfo: {
        type: Object,
        default: () => {
          return {
            name: '父亲',
          };
        },
      },
      options: {
        type: Object,
        default: () => {
          return {};
        },
      },
      centerId: {
        type: Number,
        default: 0,
      },
      isBindGenealogys: 0,
    },
    watch: {
      addPersonnelInfo: {
        async handler(newVal) {
          const { data } = await sheep.$api.genealogy.showBindButton({
            genealogy_id: this.options.id,
            relation_id: newVal.id,
          });
          this.isShow = data.show != 0 ? true : false;
          this.isBindSuccess = data.show == 2;
        },
        deep: true,
      },
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
      userInfo() {
        return sheep.$store('user').userInfo;
      },
    },
    methods: {
      open() {
        this.$refs.popup.open();
      },
      close() {
        this.$refs.popup.close();
      },
      async addRelation() {
        const { code, msg } = await sheep.$api.genealogy.checkAuth({
          genealogy_id: this.options.id,
          action: 'add',
        });
        if (code == 1) {
          this.$emit('addRelation');
        } else {
          sheep.$helper.toast(msg);
        }
      },
      async goPersonalData() {
        uni.$emit('setPersonalData', () => {
          this.$emit('reset');
        });
        await sheep.$store('family').setPerfectOptions(this.options);
        sheep.$router.go('/pages/genealogy/personalData', {
          member_id: this.addPersonnelInfo.id,
          name: `${this.addPersonnelInfo.gxname}`,
          username: `${this.addPersonnelInfo.surname}${this.addPersonnelInfo.name}`,
          id: this.options.id,
        });
        this.$emit('shiftUp');
        setTimeout(() => {
          this.close();
        }, 200);
      },
      goPersonalHome() {
        sheep.$router.go('/pages/genealogy/personalHome', {
          id: this.addPersonnelInfo.id,
          name: `${this.addPersonnelInfo.gxname}`,
          genealogy_id: this.options.id,
        });
      },
      async cherishTheMemoryOf() {
        let { data } = await sheep.$api.genealogy.aliveDetail({
          type: 2,
          id: this.addPersonnelInfo.id,
        });
        uni.setStorageSync('aliveDetail', JSON.stringify(data));
        sheep.$router.go('/pages/genealogy/ct_detail', {
          sex: this.addPersonnelInfo.sex,
          genealogy_id: this.options.id,
        });
        setTimeout(() => {
          this.close();
        }, 200);
      },
      // 排行调整
      async rankingAdjustment() {
        const { code, msg } = await sheep.$api.genealogy.checkAuth({
          genealogy_id: this.options.id,
          action: 'add',
        });
        if (code == 1) {
          sheep.$router.go('/pages/genealogy/rankingAdjust', { id: this.addPersonnelInfo.id });
          this.$emit('shiftUp');
          setTimeout(() => {
            this.close();
          }, 200);
        }
      },
      // 设为中心
      async setCenter() {
        if (this.centerId == this.addPersonnelInfo.id) {
          return;
        }
        const { code, msg } = await sheep.$api.genealogy.updateGenealogyCenter({
          genealogy_id: this.options.id,
          center_id: this.addPersonnelInfo.id,
        });
        if (code == 1) {
          sheep.$helper.toast('设置成功');
          this.$emit('setCenter', this.addPersonnelInfo.id);
          setTimeout(() => {
            this.close();
          }, 200);
        } else {
          sheep.$helper.toast(msg);
        }
      },
      // 绑定成员
      async bindMember(flag) {
        if (flag) {
          uni.showModal({
            title: '温馨提示',
            content: `是否确定从树谱解绑`,
            success: async (res) => {
              if (res.confirm) {
                const { code, msg } = await sheep.$api.genealogy.unbindRealUser({
                  genealogy_id: this.options.id,
                  relation_id: this.addPersonnelInfo.id,
                });
                if (code == 1) {
                  sheep.$helper.toast('解绑成功');
                  setTimeout(async () => {
                    this.$emit('refresh');
                    this.close();
                  }, 200);
                } else {
                  sheep.$helper.toast(msg);
                }
              }
            },
          });
        } else {
          uni.showModal({
            title: '温馨提示',
            content: '绑定后个人资料将同步至此!\n' +
              '请谨慎操作!',
            success: async (res) => {
              if (res.confirm) {
                const { code, msg } = await sheep.$api.genealogy.bindRealUser({
                  genealogy_id: this.options.id,
                  relation_id: this.addPersonnelInfo.id,
                });
                if (code == 1) {
                  sheep.$helper.toast('绑定成功');
                  setTimeout(async () => {
                    this.$emit('refresh');
                    this.close();
                  }, 200);
                } else {
                  sheep.$helper.toast(msg);
                }
              }
            },
          });
        }
      },
      // 移动位置
      async movePosition() {
        const { code, msg } = await sheep.$api.genealogy.checkAuth({
          genealogy_id: this.options.id,
          action: 'add',
        });
        if (code != 1) {
          sheep.$helper.toast(msg);
          return;
        }
        sheep.$router.go('/pages/canonization/movePosition', {
          genealogy_id: this.options.id,
          relation_id: this.addPersonnelInfo.id,
        });
      },
      // 展开
      async unfold() {
        // #ifdef H5
        // 判断浏览器是否是微信浏览器
        window.open(`${window.location.href.split('#')[0]}#/pages/genealogy/management?id=${this.options.id}&name=${this.options.name}-${this.addPersonnelInfo.surname + this.addPersonnelInfo.name}节点&add_time=${this.options.add_time}&username=${this.options.username}&is_firstScreen=true&member_id=${this.addPersonnelInfo.id}&is_confirm=true`);

        // console.log(123123);
        // location.replace(`${window.location.href.split('#')[0]}#/pages/genealogy/management?id=${this.options.id}&name=${this.options.name}-${item.surname + item.name}节点&add_time=${this.options.add_time}&username=${this.options.username}&is_firstScreen=true&member_id=${item.id}`);
        // #endif
        // #ifndef H5
        this.phoneJump(this.addPersonnelInfo);
        // #endif
      },
      // 手机模式下的跳转页面
      phoneJump(item) {
        sheep.$router.go('/pages/genealogy/management', {
          id: this.options.id,
          name: `${this.options.name}-${item.surname + item.name}节点`,
          add_time: this.options.add_time,
          username: this.options.username,
          is_firstScreen: true,
          member_id: item.id,
        });
        this.$emit('shiftUp');
      },
    },
  };
</script>

<template>
  <uni-popup ref="popup" :backdropFilter="true">
    <view class="addPersonnelPopup flex flex-column align-center" style="position: relative;">
      <view class="flex align-end justify-between">
        <view class="addPersonnelPopup_avatar" v-if="addPersonnelInfo.head">
          <image class="addPersonnelPopup_avatar_image"
                 :src="addPersonnelInfo.head.indexOf('http') != -1 ? addPersonnelInfo.head:`${nc_image}${addPersonnelInfo.head}`"></image>
        </view>
        <view class="ml_20">
          <view class="info flex align-center">
            <view class="info_name">{{ addPersonnelInfo.surname }}{{ addPersonnelInfo.name }}</view>
            <view class="info_remark ml_12">{{ addPersonnelInfo.guanxi }}</view>
          </view>
          <view class="address_info">
            祖籍地：{{ addPersonnelInfo.ancestral || '未设置祖籍地' }}
          </view>
        </view>
      </view>

      <view class="hW_43"></view>
      <view class="addButton" @click.stop="addRelation">
        <view class="graph">
          点击为
          <text class="name">{{ addPersonnelInfo.surname }}{{ addPersonnelInfo.name }}</text>
          添加亲人
        </view>
      </view>
      <view class="hW_58"></view>
      <view class="controls w-full flex align-center justify-around wh_520">
        <view class="listButton flex align-center justify-center" @click.stop="goPersonalData">
          完善资料
        </view>
        <view class="listButton flex align-center justify-center" @click.stop="rankingAdjustment">
          排行调整
        </view>
        <!--        <view class="listButton flex align-center justify-center" @click.stop="setCenter">-->
        <!--          设为中心-->
        <!--        </view>-->
      </view>
      <view class="hW_58"></view>

      <view class="flex align-center" @click.stop="cherishTheMemoryOf()" v-if="addPersonnelInfo.is_alive != 1"
            style="position: absolute;border-radius: 0rpx 20rpx 0rpx 20rpx;top: 0;right: 0;background: #FAE6BC;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 30rpx;color: #A7752A;padding: 6rpx 12rpx;">
        <image :src="`${IMG_URL}/index/gongdezhi.png`" style="width: 37rpx;height: 27rpx;" class="mr-10"></image>
        {{ '缅怀' }}
      </view>
    </view>
    <view class="wh_574 flex align-center justify-around mt_15 mb_15">
      <view class="flex-sub hW_2 ml_10 mr_20" style="background: #EBEBEB;"></view>
      <view class="fs_24 fw_500 color_EBEBEB">更多功能</view>
      <view class="flex-sub hW_2 ml_20 mr_10" style="background: #EBEBEB;"></view>
    </view>
    <view class="wh_574" style="display: grid;grid-template-columns: repeat(4,1fr);grid-gap: 10rpx">
      <view class="flex align-center justify-center fs_24 color_4B4B4B fw_500"
            style="background: #E9E9E9;border-radius: 32rpx;padding: 10rpx 0"
            @click.stop="setCenter"
      >
        {{ centerId == addPersonnelInfo.id ? '已设为中心' : '设为中心' }}
      </view>
      <view class="flex align-center justify-center fs_24 color_4B4B4B fw_500"
            style="background: #E9E9E9;border-radius: 32rpx;padding: 10rpx 0"
            @click.stop="bindMember(true)"
            v-if="isBindGenealogys != 0 && isBindGenealogys == this.addPersonnelInfo.id"
      >
        <!--      v-if="isShow"-->
        {{ '解绑' }}
      </view>
      <view class="flex align-center justify-center fs_24 color_4B4B4B fw_500"
            style="background: #E9E9E9;border-radius: 32rpx;padding: 10rpx 0"
            @click.stop="bindMember(false)"
            v-if="isBindGenealogys == 0 &&( addPersonnelInfo.sex == 1 ? 1 : 2 ) == userInfo.gender"
      >

        <!--      v-if="isShow"-->
        {{ '绑定' }}
      </view>
      <view class="flex align-center justify-center fs_24 color_4B4B4B fw_500"
            style="background: #E9E9E9;border-radius: 32rpx;padding: 10rpx 0"
            @click.stop="unfold"
      >
        <!--      v-if="isShow"-->
        展开
      </view>
      <!--            <view class="flex align-center justify-center fs_24 color_4B4B4B fw_500"-->
      <!--                  style="background: #E9E9E9;border-radius: 32rpx;padding: 10rpx 0"-->
      <!--                  @click.stop="movePosition"-->
      <!--            >-->
      <!--              &lt;!&ndash;      v-if="isShow"&ndash;&gt;-->
      <!--              移动位置-->
      <!--            </view>-->
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
  .addPersonnelPopup {
    width: 574rpx;
    background: linear-gradient(138deg, #FFA78B 0%, #FF3D00 100%);
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .addPersonnelPopup_avatar {
      margin-top: -59rpx;
      width: 164rpx;
      height: 164rpx;
      border-radius: 50%;
      border: 2rpx solid #FFFFFF;
      overflow: hidden;

      &_image {
        width: 100%;
        height: 100%;
      }
    }

    .info {

      .info_name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 36rpx;
        color: #FFFFFF;
      }

      .info_remark {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
      }
    }

    .address_info {
      max-width: 360rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 定义文本的行数 */
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }

    .addButton {
      padding: 22rpx 26rpx;
      background: #FFFFFF;
      border-radius: 48rpx 48rpx 48rpx 48rpx;

      .graph {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 36rpx;
        color: #FF4206;

        .name {
          color: #292929;
        }
      }
    }

    .controls {
      .listButton {
        width: 157rpx;
        height: 56rpx;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 32rpx 32rpx 32rpx 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }
    }
  }
</style>